import React  from 'react';
import PropTypes from 'proptypes';
import CollapseIcon from './collapse-icon.jsx';
import TableSubmenu from './table-submenu.jsx';
import {Menu,MenuItem,MenuButton,SubMenu,ControlledMenu,useMenuState} from '@szhsin/react-menu';
const sqlectron  = window.myremote.sqlectron;
// const Menu = window.myremote.remote.Menu;
// const MenuItem = window.myremote.remote.MenuItem;
const CLIENTS = sqlectron.db.CLIENTS;

export default function DatabaseItem(props){
  const [menuProps,toggleMenu]=useMenuState();
  const [state,setState]=React.useState({tableCollapsed:false,x:0,y:0});

  // let contextMenu=null;
  // const onContextMenu=(event)=> {
  //   event.preventDefault();

  //   if (!contextMenu) {
  //     buildContextMenu();
  //   }

  //   contextMenu.popup({ x: event.clientX, y: event.clientY });
  // }

  // const buildContextMenu=()=> {
  //   // const {
  //   //   client,
  //   //   database,
  //   //   item,
  //   //   dbObjectType,
  //   //   onExecuteDefaultQuery,
  //   //   onExecuteEditTable,
  //   //   onGetSQLScript,
  //   // } = props;

  //   // contextMenu = new Menu();
  //   // if (dbObjectType === 'Table' || dbObjectType === 'View') {
  //   //   contextMenu.append(
  //   //     new MenuItem({
  //   //       label: 'Select Rows (with limit)',
  //   //       click: onExecuteDefaultQuery.bind(this, database, item),
  //   //     })
  //   //   );
  //   // }
  //   // if (dbObjectType === 'Table') {
  //   //   contextMenu.append(
  //   //     new MenuItem({
  //   //       label: 'EditTable',
  //   //       click: onExecuteEditTable.bind(this, database, item),
  //   //     })
  //   //   );
  //   // }
  //   // contextMenu.append(new MenuItem({ type: 'separator' }));

  //   // const { disabledFeatures } = CLIENTS.find(
  //   //   dbClient => dbClient.key === client
  //   // );
  //   // if (!disabledFeatures || !~disabledFeatures.indexOf('scriptCreateTable')) {
  //   //   contextMenu.append(
  //   //     new MenuItem({
  //   //       label: 'Create Statement',
  //   //       click: onGetSQLScript.bind(
  //   //         this,
  //   //         database,
  //   //         item,
  //   //         'CREATE',
  //   //         dbObjectType
  //   //       ),
  //   //     })
  //   //   );
  //   // }

  //   // if (dbObjectType === 'Table') {
  //   //   const actionTypes = ['SELECT', 'INSERT', 'UPDATE', 'DELETE'];
  //   //   const labelsByTypes = {
  //   //     SELECT: 'Select Statement',
  //   //     INSERT: 'Insert Statement',
  //   //     UPDATE: 'Update Statement',
  //   //     DELETE: 'Delete Statement',
  //   //   };

  //   //   actionTypes.forEach(actionType => {
  //   //     contextMenu.append(
  //   //       new MenuItem({
  //   //         label: labelsByTypes[actionType],
  //   //         click: onGetSQLScript.bind(
  //   //           this,
  //   //           database,
  //   //           item,
  //   //           actionType,
  //   //           dbObjectType
  //   //         ),
  //   //       })
  //   //     );
  //   //   });
  //   // }
  // }

  const toggleTableCollapse=()=> {
    setState({ tableCollapsed: !state.tableCollapsed });
  }

  const renderSubItems=({ schema, name })=> {
    const {
      columnsByTable,
      triggersByTable,
      indexesByTable,
      database,
    } = props;

    if (!columnsByTable || !columnsByTable[name]) {
      return null;
    }

    const displayStyle = {};
    if (!state.tableCollapsed) {
      displayStyle.display = 'none';
    }

    return (
      <div style={displayStyle}>
        <TableSubmenu
          title="Columns"
          schema={schema}
          table={name}
          itemsByTable={columnsByTable}
          database={database}
        />
        <TableSubmenu
          collapsed
          title="Triggers"
          schema={schema}
          table={name}
          itemsByTable={triggersByTable}
          database={database}
        />
        <TableSubmenu
          collapsed
          title="Indexes"
          schema={schema}
          table={name}
          itemsByTable={indexesByTable}
          database={database}
        />
      </div>
    );
  }


  const { database, item, style, onSelectItem, dbObjectType } = props;
  const hasChildElements = !!onSelectItem;
  const onSingleClick = hasChildElements
    ? () => {
        onSelectItem(database, item);
        toggleTableCollapse();
      }
    : () => {};

  const collapseArrowDirection = state.tableCollapsed ? 'down' : 'right';
  const tableIcon = (
    <i
      className="table icon"
      style={{ float: 'left', margin: '0 0.3em 0 0' }}
    />
  );

  const { schema, name } = item;
  const fullName = schema ? `${schema}.${name}` : name;

  return (
    <div>
      <span
        style={style}
        className="item"
        onClick={onSingleClick}
        onDoubleClick={()=>{props.onExecuteDefaultQuery(props.database,props.item);}}
        onContextMenu={(e)=>{
          console.log("onContextmenu")
          e.preventDefault();
          setState((state)=>({...state,x:e.clientx,y:e.clienty}));
          toggleMenu(true);
        }}
      >
        {dbObjectType === 'Table' ? (
          <CollapseIcon arrowDirection={collapseArrowDirection} />
        ) : null}
        {dbObjectType === 'Table' ? tableIcon : null}
        {fullName}
      </span>
      {renderSubItems(item)}
      <ControlledMenu {...menuProps} 
         anchorPoint={{x:state.x,y:state.y}}
         onClose={()=>toggleMenu(false)}>
          <MenuItem onClick={()=>{
            console.log("preview click")
            props.onExecuteDefaultQuery(props.database,props.item);
          }}>execute default query</MenuItem>
          <MenuItem>copy</MenuItem>
      </ControlledMenu>
    </div>
  );
}
